<template>
	<view>
		<!-- 搜索 -->
		<view class="search-box" @click="searchArea">
			<u-search placeholder="请输入关键词" v-model="searchValue" :showAction="false" actionText="搜索"
				:animation="true"></u-search>
		</view>
		<!-- 竖型列表 -->
		<view class="classification-box">
			<!-- 左侧分类列表 -->
			<view class="left-list-box">
				<view v-for="(item,index) in leftList" :key="index" class="left-item-box"
					:class="brightHigh == index? 'bright-high-red':''" @click="itemClick(item,index)">
					{{item.text}}
				</view>
			</view>
			<!-- 右侧盒子 -->
			<view class="right-box">
				<view class="right-title-image">
					<image src="https://b2b.hipin.cc/uploads/images/2021062317001844cf80052.jpeg"></image>
				</view>
				<!-- 列表 -->
				<scroll-view :scroll-top="175" scroll-y="true" class="scroll-Y">
					<view class="right-item-box" v-for="(item,index) in list" :key="index">
						<!-- 分类名称 -->
						<view class="right-item-title-box" @click="categoryProducts">
							{{item.title}}
							<u-icon name="arrow-right"></u-icon>
						</view>
						<!-- 如果还有下一级就展示这里 -->
						<view class="inside-box" v-if="item.childLevel.length>1">
							<view v-for="(val,index) in item.childLevel" :key="index" class="inside-item-box" @click="categoryProducts">
								<image src="https://b2b.hipin.cc/uploads/images/2021062317001844cf80052.jpeg" mode="">
								</image>
								<text>{{val.text}}</text>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索框
				searchValue: '',
				// 亮高
				brightHigh: 0,
				// 左侧列表
				leftList:[
					{
						text:'翡翠催催催催催'
					},
					{
						text:'和田玉'
					},
					{
						text:'包包'
					},
					{
						text:'游戏机'
					},
					{
						text:'手抓饼'
					},
				],
				// 右侧列表
				list: [{
						title: '手机',
						childLevel: [{
								text: '小米'
							},
							{
								text: '大米'
							},
							{
								text: '中米'
							},
							{
								text: '老米'
							},
						]
					},
					{
						title: '充电宝',
						childLevel: []
					}
				]
			}
		},
		methods: {
			// 左侧列表点击亮高
			itemClick(e, i) {
				this.brightHigh = i
			},
			// 顶部搜索框跳转搜索页面
			searchArea(){
				uni.navigateTo({
					url:'/pages/index/searchArea/searchArea'
				})
			},
			categoryProducts(){
				uni.navigateTo({
					url:'/pages/index/categoryProducts/categoryProducts'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		width: 95%;
		height: 100rpx;
		margin: 0 auto;

		input: {
			margin: auto;
		}
	}

	.classification-box {
		width: 100%;
		min-height: 100rpx;
		background-color: #eee;
		display: flex;

		.left-list-box {
			width: 180rpx;
			min-height: 92.2vh;
			background-color: white;

			.left-item-box {
				margin: 30rpx 0;
				width: 100%;
				min-height: 40rpx;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.right-box {
			padding: 20rpx;
			width: 600rpx;
			height: auto;

			.right-title-image {

				// width: 300rpx;
				image {
					border-radius: 10rpx;
					width: 100%;
					height: 200rpx;
					margin-bottom: 10rpx;
				}
			}

			.right-item-box {
				width: 100%;
				line-height: 80rpx;
				border-radius: 10rpx;
				background-color: white;
				margin-bottom: 20rpx;

				.right-item-title-box {
					width: 97%;
					min-height: 80rpx;
					padding: 0 10rpx;
					display: flex;
					justify-content: space-between;
					font-weight: 1000;
					font-size: 29rpx;
				}

				.inside-box {
					width: 100%;
					min-height: 100rpx;
					background-color: #fff;
					border-radius: 10rpx;
					// padding: 0 10rpx;
					display: flex;
					flex-wrap: wrap;

					.inside-item-box {
						margin: 8rpx;
						width: 30.5%;
						height: 190rpx;
						text-align: center;
						line-height: 55rpx;
						color: #393939;
						font-size: 27rpx;

						image {
							width: 100%;
							min-height: 20%;
							max-height: 60%;
						}
					}
				}
			}
		}
	}


	// 红色亮高
	.bright-high-red {
		border-left: 5rpx solid red;
		color: red;
	}

	.scroll-Y {
		height: 935rpx;
	}
</style>